<template>
	<view class="uni_box home">
		<navbar title='账单管理' :yin="false">
		</navbar>
		<view class="content">
			<view class="bill">
				<view class="zhutview oneitem">
					<view class="hview one">
						时间
					</view>
					<view class="hview center two" @click="bshow=true">
						<text>{{ bill_info.label }}</text>
						<image class="xia" src="/static/img/xia.png" />
					</view>
					<view class="hview end three">
						数量
					</view>
				</view>
				<!-- <view class="zhutview twoitem">
					<view class="hview one">
						<text class="describe">2024/01/01 11:23</text>
					</view>
					<view class="hview center two">
						<text class="describe">充值</text>
					</view>
					<view class="hview end three">
						<text class="describenum">+100 U</text>
					</view>
				</view> -->
				<view class="zhutview twoitem" v-for="(item,index) in list" :key="index">
					<view class="hview one">
						<text class="describe">{{ item.created_at }}</text>
					</view>
					<view class="hview center two">
						<text class="describe">{{item.log_type_text}}</text>
					</view>
					<view class="hview end three">
						<text class="describenum">{{ item.trade_inc==1?'+':'-'+Number(item.amount) }}</text>
					</view>
				</view>
			</view>
		</view>

		<u-select v-model="bshow" :list="bill_type" @confirm="bconfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bshow:false,
				blist:[
					// {
					// 	value: '1',
					// 	label: '全部类型'
					// },
					// {
					// 	value: '2',
					// 	label: '充值'
					// },
					// {
					// 	value: '2',
					// 	label: '提现'
					// },
					// {
					// 	value: '2',
					// 	label: '分红'
					// },
					// {
					// 	value: '2',
					// 	label: '返佣'
					// }
				],
				id:'',
				sinfo:{},
				bill_type:[],
				bill_info:{
					value:'全部'
				},

				list: [],

				page: 1,
				last_page: 1,
				limit: 10,
				status: 'loadmore',
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getstatistic()
		},
		onShow() {
		},
		onReachBottom: function() {
			this.loadmore();
		},
		methods: {
			async getstatistic(){
				let res = await this.$u.api.apiconfig({
					// type:'day'
				});
				console.log(res)
				this.sinfo = res
				let arry = this.sinfo.bill_type 
				for(let i in arry){
					arry[i].label = arry[i].value
					arry[i].value = arry[i].name
				}
				console.log(arry)
				this.bill_type = arry
				this.bill_info = arry[0]
				this.getList();//列表 
			},
			bconfirm(e){
				console.log(e)
				// this.wang = e[0].value
				this.bill_info =  e[0]
				console.log(this.bill_info)
				this.page = 1
				this.list = []
				this.status = 'loadmore'
				this.getList();//列表 
			},
			async getList(){
				let list = await this.$u.api.money_log({
					page:this.page,
					limit:this.limit,
					currency:this.id,
					log_type:this.bill_info.value
				});
				console.log(list)
				this.last_page = list.last_page;
				this.list = this.page == 1 ? list.data : [...this.list, ...list.data];
				if (this.last_page == this.page || list.data == '') {
					this.status = 'nomore';
				}
			},
			loadmore() {
				let page = this.page;
				let last_page = this.last_page;
				if (page < last_page) {
					this.page++;
					this.getList();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding: 40rpx;
		.bill{
			.zhutview{
				display: flex;
				flex-direction: row;
				.hview{
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}
				.end{
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
				.center{
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.oneitem{
				margin-bottom: 30rpx;
			}
			.twoitem{
				padding: 20rpx 0;
				.bicon{
					width: 44rpx;
					height: 44rpx;
					margin-right: 10rpx;
				}
				.hname{
					max-width: 65%;
					display: inline-block;
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					.usd{
						font-size: 24rpx;
						font-weight: 400;
					}
				}
			}
			.xia{
				width: 16rpx;
				height: 10rpx;
				margin-left: 10rpx;
			}
			.describe{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
			.describenum{
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 26rpx;
				color: #32BE67;
			}
			.zitem{
				padding: 8rpx 20rpx;
				border-radius: 10rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 22rpx;
				color: #32BE67;
			}
			.zhang{
				background: rgba(50,190,103,0.15);
				color: #32BE67;
				border: 1px solid #32BE67;
			}
			.die{
				background: rgba(233,81,81,0.15);
				border: 1px solid #E95151;
				color: #E85151;
			}
			.one{
				width: 35%;
			}
			.two{
				width: 35%;
			}
			.three{
				width: 30%;
			}
			.time{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 20rpx;
				color: #000000;
			}
		}
		// padding-bottom: 150rpx;
	}
</style>
